<template>
  <div class="install-container">
    <el-card class="install-card">
      <template #header>
        <div class="card-header">
          <h2>蝉印诊所管家安装向导</h2>
          <el-steps :active="currentStep" finish-status="success" simple>
            <el-step title="许可协议" />
            <el-step title="环境检测" />
            <el-step title="信息配置" />
            <el-step title="安装过程" />
            <el-step title="安装完成" />
          </el-steps>
        </div>
      </template>
      <router-view></router-view>
    </el-card>
    <div class="copyright">
      Copyright © {{ new Date().getFullYear() }} 蝉印诊所管家 All Rights Reserved
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const currentStep = computed(() => {
  const stepMap = {
    '/license': 0,
    '/environment': 1,
    '/config': 2,
    '/install': 3,
    '/complete': 4
  }
  return stepMap[route.path] || 0
})
</script>

<style scoped>
.install-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
  padding: 20px;
  overflow: hidden;
}

.install-card {
  width: 100%;
  max-width: 900px;
  margin: 0 auto 20px;
  /* height: calc(100vh - 250px); */
  display: flex;
  flex-direction: column;
}

.card-header {
  text-align: center;
}

.card-header h2 {
  margin-bottom: 20px;
  color: #303133;
}

:deep(.el-card__body) {
  flex: 1;
  padding: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

:deep(.el-steps) {
  margin: 20px 0;
}

.copyright {
  color: #909399;
  font-size: 14px;
  text-align: center;
  margin-top: 20px;
}
</style> 